<template>
  <div>
    <div class="city" @click="handleJumpCity">
      {{ cityName }}
      <i class="iconfont icon-icon_jiantou-xia"></i>
    </div>

    <div class="banner">
      <film-swiper v-if="bannerDataList.length" :key="bannerDataList.length">
        <film-swiper-item v-for="item in bannerDataList" :key="item.bannerId">
          <img :src="item.imgUrl" alt="">
        </film-swiper-item>
      </film-swiper>
    </div>

    <!-- <div>嵌套路由声明式导航</div> -->
    <!--  二级路由容器  -->
    <film-header class="sticky"></film-header>
    <router-view></router-view>

  </div>
</template>
<script>
import filmSwiper from '@/components/films/FilmSwiper';
import filmHeader from '@/components/films/FilmHeader';
import filmSwiperItem from '@/components/films/FilmSwiperItem';
import axios from "axios";
import {mapState,mapMutations,mapActions} from "vuex";
import BetterScroll from "better-scroll";

export default {
  computed: {
    ...mapState(['cityName','cinemaList','cityId'])
  },
  components: {
    filmSwiper,
    filmSwiperItem,
    filmHeader
  },
  data() {
    return {
      bannerDataList: [],
    }
  },
  methods: {
    ...mapMutations(['clearCinemaData']),
    ...mapActions(['getCinemaData']),

    handleJumpCity(){
      this.$router.push('/city')
      // 清空影院数据
      this.clearCinemaData()
    }
  },
  mounted() {
    axios({
      url: 'https://m.maizuo.com/gateway?type=2&cityId=440300&k=3616673',
      headers: {
        'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.0","e":"1640782700594797135921153"}',
        'X-Host': 'mall.cfg.common-banner'
      }
    }).then(res => {
      // console.log(res.data.data)
      this.bannerDataList = res.data.data
    });

    // stare里面有cinema数据就不需要发起请求
    if(this.cinemaList.length === 0) {
      this.getCinemaData(this.cityId).then(() => {
      })
    }
  },
}
</script>
<style lang="scss" scoped>
.city {
  position: absolute;
  top: 18px;
  left: 7px;
  color: #fff;
  z-index: 100;
  font-size: 13px;
  background: rgba(0, 0, 0, .3);
  width: 50px;
  height: 30px;
  line-height: 30px;
  border-radius: 15px;
  box-sizing: border-box;
  text-align: center;
  padding: 0 5px;
  display: flex;

  .icon-icon_jiantou-xia {
    padding-left: 2px;
    padding-top: 1px;
    font-weight: 900;
    box-sizing: border-box;
    display: inline-block;
    font-size: 8px;
    -webkit-transform: scale(0.6); /*针对Chrome 设置字体缩小比例*/
    -o-transform: scale(1); /*针对能识别-webkit的opera browser设置*/
  }
}

.banner {
  width: 3.75rem;
  height: 2.1rem;
}

img {
  width: 3.75rem;
}

.sticky {
  position: sticky; /* 粘性定位 */
  top: 0;
}
</style>
